@extends('web.frame_layout')
<?php $parent_menu = "会员管理"; $menu_selected = "注册新会员";?>
<link rel="stylesheet" href="{{asset('web/css/vip-register.css')}}">
<style>
    .grey {
        background: grey !important;
    }
</style>
@section('content')
    <div class="m-right-nr">
        <div>
            <h2><span>{{$menu_selected}}</span></h2>
            <div class="m-vip_rgt">
                <form class="m-vip_rgt" id="m-vip_rgt" autocomplete="on" action="{{route('reg.act')}}"
                      method="post">
                    {!! csrf_field() !!}
                    <ul>
                        <li>
                            <label for="ID" class="hidden-xs"><i>*</i>用户名：</label>
                            <input type="text" id="ID" name="name" placeholder="请输入会员登录帐号">
                            <p class="u-ts"></p>
                        </li>
                        <li>
                            <label for="TJ_ID" class="hidden-xs"><i>*</i>推荐人帐号：</label>
                            <input type="text" id="TJ_ID" name="pname" value="{{$puser->username or ""}}"
                                   placeholder="请输入推荐人用户名">
                            <p class="u-ts"></p>
                        </li>
                        <li>
                            <label for="JD_ID" class="hidden-xs"><i>*</i>节点人帐号：</label>
                            <input type="text" id="JD_ID" name="nname" value="{{$nuser->username or ""}}"
                                   placeholder="请输入节点人用户名">
                            {{--<label for="JD_ID" class="hidden-xs"><i>*</i>节点人帐号：</label>--}}
                            {{--<input type="text" id="JD_ID" name="nname" value="{{$nuser->username or ""}}"--}}
                            {{--placeholder="请输入接点人用户名">--}}
                            <p class="u-ts"></p>
                        </li>
                        <li>
                            <label for="choose_vip" class="hidden-xs"><i>*</i>选择会员等级：</label>
                            <select id="choose_vip" name="vip">
                                <option value="">--请选择要注册的会员等级--</option>
                                @foreach($vips as $vip)
                                    <option value="{{$vip->slug}}">{{$vip->name}}</option>
                                @endforeach
                            </select>
                            <p class="u-ts"></p>
                        </li>
                        <li>
                            <label for="pass" class="hidden-xs"><i>*</i>登录密码：</label>
                            <input type="password" id="pass" name="pass" placeholder="请输入登录密码">
                            <p class="u-ts"></p>
                        </li>
                        <li>
                            <label for="repass" class="hidden-xs"><i>*</i>确认登录密码：</label>
                            <input type="password" id="repass" name="repass" placeholder="请确认登录密码">
                            <p class="u-ts"></p>
                        </li>
                        <li>
                            <label for="password" class="hidden-xs"><i>*</i>交易密码：</label>
                            <input type="password" id="safepass" name="safepass" placeholder="请输入交易密码">
                            <p class="u-ts"></p>
                        </li>
                        <li>
                            <label for="QR_password" class="hidden-xs"><i>*</i>确认交易密码：</label>
                            <input type="password" id="resafepass" name="resafepass" placeholder="请确认交易密码">
                            <p class="u-ts"></p>
                        </li>
                        <li>
                            <label for="realname" class="hidden-xs"><i>*</i>真实姓名：</label>
                            <input type="text" id="realname" name="realname" placeholder="请输入您的真实姓名">
                            <p class="u-ts"></p>
                        </li>
                        <li>
                            <label for="email" class="hidden-xs"><i>*</i>邮箱：</label>
                            <input type="text" id="email" name="email" placeholder="请输入您的联系邮箱">
                            <p class="u-ts"></p>
                        </li>
                        <li>
                            <label for="tel" class="hidden-xs"><i>*</i>手机号：</label>
                            <input type="text" id="tel" name="tel" placeholder="请输入您的联系电话">
                            <p class="u-ts"></p>
                        </li>
                        <li>
                            <label for="sms_code" class="hidden-xs"><i>*</i>短信验证码：</label>
                            <input type="text" id="sms_code" name="sms_code" placeholder="请输入短信验证码">
                            <input type="button" id="sendSmsCode" class="register-hqyzm"
                                   value="获取验证码">
                            <p class="u-ts"></p>
                        </li>
                        <li class="checkbox_li">
                            <label for="protocol" class="hidden-xs"></label>
                            <input type="checkbox" class="checkbox" name="protocol" id="protocol">
                            阅读并同意 <a style="cursor:pointer"
                                     onclick="contentDlg(1, '{{$protocol->content}}')">《{{$protocol->title}}》</a>
                            <p class="u-ts"></p>
                        </li>
                        <li>
                            <button class="register-ljzc">立即注册</button>
                        </li>
                    </ul>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('footer')
    @include('front.coms.protocol-dialog')
    {{--    <script src="{{asset('web/js/vip-register.js')}}"></script>--}}
    <script>
        // 验证规则
        $('#m-vip_rgt').validate({
            rules: {
                name: {
                    required: true,
                    rangelength: [5, 50],
                    username: true
                },
                pname: {
                    required: true,
                    rangelength: [5, 50],
                    username: true
                },
                nname: {
                    required: true,
                    rangelength: [5, 50],
                    username: true
                },
                vip: {
                    required: true
                },
                pass: {
                    required: true,
                    rangelength: [6, 30],
                    password: true
                },
                repass: {
                    required: true,
                    equalTo: "#pass"
                },
                safepass: {
                    required: true,
                    rangelength: [6, 30],
                    password: true
                },
                resafepass: {
                    required: true,
                    equalTo: "#safepass"
                },
                realname: {
                    required: true,
                    realname: true
                },
                email: {
                    required: true,
                    isEmail: true
                },
                tel: {
                    required: true,
                    isMobile: true
                },
                sms_code: 'required',
                protocol: {
                    required: true
                }
            },
            messages: {
                name: {
                    required: '请填写用户名',
                    rangelength: '用户名只能5位以上'
                },
                pname: {
                    required: '请填写推荐人用户名',
                    rangelength: '推荐人用户名只能5位以上'
                },
                nname: {
                    required: '请填写节点人用户名',
                    rangelength: '节点人用户名只能5位以上'
                },
                vip: {
                    required: '请选择用户注册等级'
                },
                pass: {
                    required: '请填写登录密码',
                    rangelength: '登录密码只能6-30位'
                },
                repass: {
                    required: '请确认登录密码',
                    equalTo: '登录密码两次输入不一致'
                },
                safepass: {
                    required: '请填写交易密码',
                    rangelength: '交易密码只能6-30位'
                },
                resafepass: {
                    required: '请确认交易密码',
                    equalTo: '交易密码两次输入不一致'
                },
                realname: {
                    required: '请填写您的真实姓名'
                },
                email: {
                    required: '请输入邮箱'
                },
                tel: {
                    required: '请输入手机号'
                },
                sms_code: {
                    required: '请填写短信验证码'
                },
                protocol: {
                    required: '请阅读并同意注册协议'
                }
            },
            errorPlacement: function (error, element) {
                $(element).siblings('.u-ts').html(error);
                return false;
            },
            errorElement: 'span',
            submitHandler: function (form) {
                $(form).ajaxSubmit({
                    dataType: "json",
                    type: "post",
                    beforeSend: function () {
                        $(".register-ljzc").addClass('grey').attr('disabled', 'disabled');
                    },
                    success: function (data) {
                        $(".register-ljzc").removeClass('grey').removeAttr('disabled');
                        if (data.code == 0) {
                            toastr["success"](data.msg);
                            setInterval(function () {
                                window.location.reload();
                            }, 2000);
                        } else {
                            toastr["error"](data.msg);
                        }
                    }
                });
            }
        });


        $('#sendSmsCode').on('touchend click', function (e) {
            e.preventDefault();
            //手机号验证
            var tel = $("#tel").val();
            var rule = /^[1][34578][\d]{9}$/.test(tel);
            if (rule) {
                $("#tel").removeClass('error').siblings('p').html('')
            } else {
                $("#tel").addClass('error').siblings('p').html('请输入正确手机号');
                return false;
            }

            var self = $("#sendSmsCode");
            $.ajax({
                type: "POST",
                url: "/send-common-code/" + tel + "/" + "reg",
                dataType: "json",
                beforeSend: function () {
                    $('.register-hqyzm').addClass('grey').attr('disabled', 'disabled');
                },
                success: function (data) {
                    if (data.code == 0) {
                        toastr.success(data.msg);
                        var num = 120, timer;
                        $(this).addClass('grey').val('重新发送（' + num + '）');
                        timer = setInterval(function () {
                            num--;
                            $('.register-hqyzm').val('重新发送（' + num + '）');
                            if (num <= 0) {
                                clearInterval(timer);
                                $('.register-hqyzm').removeClass('grey').removeAttr('disabled').val('获取验证码');
                            }
                        }, 1000);
                    }
                    if (data.code == 1) {
                        $('.register-hqyzm').removeClass('grey').removeAttr('disabled').val('获取验证码');
                        toastr.error(data.msg);
                    }
                }
            });
        });

    </script>
@endsection